<template>
  <div class="content">
    <div class="login-container">
      <div class="login-title">欢迎登录博客系统</div>
      <div class="login-form">
        <a-form size="large" :model="loginForm" @submit="handleSubmit">
          <a-form-item field="username" hide-label hide-asterisk :rules="{ required: true, message: '请输入用户名' }">
            <a-input style="background-color: #fff;" v-model="loginForm.username" placeholder="请输入用户名">
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item style="margin-top: 12px" field="password" hide-label hide-asterisk
            :rules="{ required: true, message: '请输入密码' }">
            <a-input-password style="background-color: #fff;" v-model="loginForm.password" placeholder="请输入密码"
              allow-clear>
              <template #prefix>
                <icon-lock />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item field="remember_me" hide-label hide-asterisk>
            <a-checkbox style="margin-left: auto;" v-model="loginForm.remember_me" value="boolean">记住</a-checkbox>
          </a-form-item>
          <a-form-item hide-label hide-asterisk>
            <a-button :loading="summitLoading" type="primary" style="width: 100%;" html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>

import { reactive, ref } from 'vue';
import { LOGIN } from '@/api/token.js'
import { token } from '@/stores/token'
import { useRouter } from 'vue-router';

const router = useRouter()

const loginForm = reactive({
  username: '',
  password: '',
  remember_me: false,
})

const summitLoading = ref(false)
const handleSubmit = async (data) => {
  if (data.errors === undefined) {
    try {
      summitLoading.value = true
      const tk = await LOGIN(data.values)
      // 保存当前用户的登录状态
      token.value.access_token = tk.access_token
      token.value.ref_user_name = tk.ref_user_name
      token.value.refresh_token = tk.refresh_token

      // 需要把用户重定向到Home页面去了
      router.push({ name: 'blog_management' })
    } catch (error) {
      console.log(error)
    } finally {
      summitLoading.value = false
    }
  }
}

</script>

<style lang="css" scoped>
.content {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: rgb(243, 238, 238);
}

.login-container {
  width: 460px;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.3);
  /* 增加透明度 */
  border-radius: 15px;
  backdrop-filter: blur(15px);
  /* 增加模糊程度 */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.login-title {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-neutral-8);
}

.login-form {
  padding: 20px;
  height: 100%;
  width: 100%;
}
</style>
